import React, {Component} from 'react';
import {View, Text, StyleSheet, ScrollView, Image, TouchableOpacity} from "react-native";
import Header from "../../../components/header";
import icon from "../../../utils/icon";
import {pxToDp} from "../../../utils/styleKits";
import JMessage from '../../../utils/JMessage.js'
import {NavigationContext} from '@react-navigation/native';

let btnData = [
  {title: '全部', icon: icon.icongonggao, color: '#ccd157'},
  {title: '点赞', icon: icon["icondianzan-o"], color: '#de3813'},
  {title: '评论', icon: icon.iconpinglun, color: '#4c82d5'},
  {title: '喜欢', icon: icon["iconxihuan-o"], color: '#4dba8d'},
];

class Index extends Component {
  static contextType = NavigationContext;
  state = {
    message: [],
  };

  componentDidMount(): void {
    this.getConversations()
  }

  render() {
    let {message} = this.state;
    return (
      <View style={{flex: 1}}>
        {/*导航*/}
        <Header title={'消息'} leftTitle={''} leftIcon={''} rightIcon={icon.icontongxunlu}/>

        {/*顶部按钮*/}
        <View style={styles.topBtnContainer}>
          {
            btnData.map((item, i) => {
              return <TouchableOpacity key={i} style={styles.topBtnBox}>
                <View style={{...styles.topBtnIcon, backgroundColor: item.color}}>
                  <Text style={{fontFamily: 'iconfont', fontSize: pxToDp(20), color: '#fff'}}>{item.icon}</Text>
                </View>
                <Text style={{color: '#666', fontSize: pxToDp(12)}}>{item.title}</Text>
              </TouchableOpacity>
            })
          }
        </View>

        <ScrollView>

          {
            message.map((item, i)=>{
              console.log(item);
              return <TouchableOpacity onPress={()=>this.context.navigate('chat')} key={i} style={{
                flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
                padding: pxToDp(10), borderBottomWidth: pxToDp(1), borderBottomColor: '#ddd'
              }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Image source={{uri: 'https://www.itying.com/images/flutter/list1.jpg'}} style={styles.headerImg}/>
                  <View style={{marginLeft: pxToDp(10)}}>
                    <Text>{item.target.username}</Text>
                    <Text>{item.latestMessage && item.latestMessage.text}</Text>
                  </View>
                </View>

                <View style={{alignItems: 'flex-end'}}>
                  <Text>{item.latestMessage && this.handleTime(item.latestMessage.createTime)}前</Text>
                  <View style={{
                    backgroundColor: 'red', width: pxToDp(20), height: pxToDp(20),
                    alignItems: 'center', justifyContent: 'center', borderRadius: pxToDp(10)
                  }}>
                    <Text style={{color: '#fff'}}>2</Text>
                  </View>
                </View>
              </TouchableOpacity>
            })
          }

        </ScrollView>
      </View>
    );
  }

  // 计算消息距离现在多长时间
  handleTime = (time) => {
    let t = Date.now();
    let diffT = t - time;
    // 分钟
    diffT = diffT/(1000*60);

    if (diffT < 60){
      // 分钟 取整
      diffT = parseInt(diffT);
      return diffT + '分' ;

    } else {
      // 时
      diffT = diffT/60;

      if(diffT < 24){
        // 时 取整
        diffT = parseInt(diffT);
        return diffT + '时';

      } else {
        // 天 取整
        diffT = parseInt(diffT/24);
        return diffT + '天';
      }
    }
  };

  // 获取极光通讯里发送的消息
  getConversations = async () => {
    let res = await JMessage.getConversations();
    this.setState({
      message: res
    })
  };
}

const styles = StyleSheet.create({
  topBtnContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: pxToDp(10),
    borderBottomColor: '#ddd',
    borderBottomWidth: pxToDp(3),
  },
  topBtnBox: {
    alignItems: 'center'
  },
  topBtnIcon: {
    width: pxToDp(50),
    height: pxToDp(50),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: pxToDp(25),
  },


  headerImg: {
    width: pxToDp(60),
    height: pxToDp(60),
    borderRadius: pxToDp(40),
  }
});

export default Index;